<template>
  <div>
    <div class="word">
      <van-nav-bar title="当前城市-" left-text="X" @click-left="onClickLeft" />
      <van-search v-model="value" placeholder="请输入城市名或名称" />
      <div class="topArea">
        <div class="gpsCity">
          <div class="word2">GPS定位你所在的城市</div>
          <div class="square">定位失败</div>
        </div>
        <div class="hotCity">
          <div class="word2">热门城市</div>
          <div class="square2">北京</div>
          <div class="square2">上海</div>
          <div class="square2">广州</div>
          <div class="square2">温哥华</div>
        </div>
      </div>
      <van-index-bar sticky sticky-offset-top="100">
        <template v-for="item in cityList" :key="item.name">
          <van-index-anchor :index="item.name" />
          <van-cell
            :title="it.name"
            v-for="it in item.children"
            :key="it.cityId"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { getCityList } from "../../API/cityList";
export default {
  setup() {
    const onClickLeft = () => history.back();
    const value = ref("");

    // 城市列表初始化为空
    const cityList = ref([]);
    // 自执行函数，请求城市列表数据
    (async () => {
      const {
        data: {
          data: { cities },
        },
      } = await getCityList({ k: 3880300 });
      // console.log(cities); // 从返回结果解构出city数据
      fromCityData(cities);
    })();

    const letterArr = [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z",
    ];

    // 过滤数据
    function fromCityData(data: []) {
      var arr: [] = []; // 初始化第一次整理的数据
      letterArr.forEach((item) => {
        const o = { name: item, children: [] }; // 经过筛选之后形成这样的格式

        // 循环数据，把children数组内的数据分离
        data.forEach((it) => {
          if (it.pinyin[0].toUpperCase() === item) {
            o.children.push(it);
          }
        });
        if (o.children.length > 0) arr.push(o); // 这里得到的数据一开始是有空数组，所以要去掉空值
      });
      console.log(arr);
      cityList.value = arr;
    }

    return {
      onClickLeft,
      value,
      cityList,
      letterArr,
      fromCityData,
    };
  },
};
</script>

<style scoped>
.word {
  font-size: 30px;
}
.topArea {
  width: 358px;
  height: 209px;
  padding-left: 15px;
  padding-top: 15px;
  box-sizing: border-box;
  margin-top: 100px;
}
.gpsCity {
  width: 343px;
  height: 74px;
  /* margin-bottom: 10px; */
}
.square {
  width: 100px;
  height: 30px;
  background-color: rgb(242, 242, 242);
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}
.word2 {
  font-size: 14px;
}
.hotCity {
  width: 343px;
  height: 120px;
}
.square2 {
  width: 100px;
  height: 30px;
  background-color: rgb(242, 242, 242);
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  margin-top: 13px;
  float: left;
  margin-right: 12px;
}
.van-search {
  position: fixed;
  top: 45px;
  width: 100%;
  z-index: 999;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
</style>
